<template>
	<view>
		<view class="mask"></view>
		<view class="modal">
			<view class="title">
				{{title}}
			</view>
			<view class="content">
				{{content}}
			</view>
			<view class="btn">
				<text class="yes" @tap="clickOk" :style="activeStyle">确定</text>
				<text class="no" @tap="clickNo" :style="itemStyle">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'my-modal',
		props:{
			title:{
				type: String,
				default:'提示'
			},
			content:{
				type: String,
				default:''
			},
			activeColor: {
				type: Object,
				default() {
					return {
						color:'#ffffff',
						bgColor:'#1CC295'
					}
				}
			},
			styleType: {
				type: Object,
				default() {
					return {
						color:'#ffffff',
						bgColor:'#1CC295'
					}
				}
			}
		},
		computed: {
			activeStyle() {
				let styleString = '';
				if(this.activeColor){
					styleString = `color:${this.activeColor.color};background-color:${this.activeColor.bgColor}`;
				} else {
					styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
				}
				return styleString;
			},
			itemStyle() {
				let styleString = '';
				if(this.styleType){
					styleString = `color:${this.styleType.color};`;
				} else {
					styleString = `color:#fff;background-color:${this.styleType.bgColor}`;
				}
				return styleString;
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			clickOk(){
				this.$emit('clickOk');
			},
			clickNo(){
				this.$emit('clickNo');
			}
		},
	}
</script>

<style lang="less" scoped>
	@green: #1CC295;
	@red: #ED2252;
	@yellow: #1CC295;
	@black: #12151E;
	@gray: #898C9D;
	@white: #FFFFFF;
	.mask{
		position: fixed;
		top:0;
		left:0;
		height:100%;
		width:100%;
		background-color: rgba(#000,0.5);
		z-index:50;
	}
	.modal{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		z-index: 60;
		padding:25upx 40upx;
		border-radius: 8upx;
		width:80%;
		.title{
			font-size:36upx;
			color:#232323;
			font-weight:600;
			text-align: center;
		}
		.content{
			font-size:34upx;
			color:#232323;
			font-weight:600;
			font-size:28upx;
			padding: 20upx 40upx 40upx 40upx;
		}
		.btn{
			display: flex;
			justify-content: space-around;
			align-items: center;
			height:100upx;
			text{
				display: inline-block;
				text-align: center;
				padding:18upx 100upx;
				box-sizing: border-box;
				border-radius: 6upx;
			}
			.yes{
				background-color: @green;
				color:@white;
			}
			.no{
				// border:2upx solid #FFD11B;
				color:@white;
				background-color: @green;
			}
		}
	}
</style>
